<template>
  <div class="app-container" v-if="currentShoeRack">
    <ul class="menu">
      <li
        v-for="item in shoeRackList"
        :class="currentShoeRack.id === item.id ? 'active' : ''"
        @click="currentShoeRack = item"
      >
        {{ item.rackCode }}-{{ item.remark }}
      </li>
    </ul>
    <div class="content" v-loading="loading">
      <div style="margin-bottom: 30px">
        <el-button
          :type="viewModel === 'list' ? 'primary' : 'default'"
          @click="viewModel = 'list'"
          >列表</el-button
        >
        <el-button
          :type="viewModel === 'shapes' ? 'primary' : 'default'"
          @click="viewModel = 'shapes'"
          >二维图</el-button
        >
      </div>

      <el-table v-if="viewModel === 'list'" :data="list" style="width: 100%">
        <el-table-column prop="showCode" label="货架号"> </el-table-column>
        <el-table-column prop="rowNumberSort" label="层数">
          <template slot-scope="scope">
            {{ scope.row.rowNumberSort + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="colNumberSort" label="列数">
          <template slot-scope="scope">
            {{ scope.row.colNumberSort + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="!!scope.row.washCode" type="danger">占用</el-tag>
            <el-tag v-else type="success">空闲</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="washCode" label="鞋子水洗码"> </el-table-column>
      </el-table>

      <div class="shapes-section" v-if="viewModel === 'shapes'">
        <div class="shapes-content">
          <div class="shapes-row" v-for="row in currentShoeRack.rowNum">
            <div
              :class="`shapes-col ${getRackStatus(row, col).status}`"
              v-for="col in currentShoeRack.colNum"
            >
              <div
                style="text-align: center"
                slot="reference"
                v-if="getRackStatus(row, col).status !== 'occupy'"
              >
                <p>{{ row }} - {{ col }}</p>
                <p>空闲</p>
              </div>

              <el-popover
                placement="top-start"
                title="水洗码"
                width="200"
                trigger="hover"
                v-else
                :content="getRackStatus(row, col).item.washCode"
              >
                <div style="text-align: center" slot="reference">
                  <p>{{ row }} - {{ col }}</p>
                  <p>占用</p>
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </div>

      <pagination
        v-if="viewModel === 'list' && queryParams.total > 0"
        :total="queryParams.total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getListData"
      />
    </div>
  </div>
</template>

<script>
import { getShoeRackGridList, getShoeRackListUser } from "@/api/shoeRack/index";
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        page: 0,
        pageSize: 10,
        total: 0,
      },
      list: [],
      shoeRackList: null,
      currentShoeRack: null,
      viewModel: "list",
    };
  },

  watch: {
    currentShoeRack: {
      handler(val) {
        this.list = [];
        this.getListData({
          page: 1,
          limit: 10,
        });
      },
      immediate: true,
    },
    viewModel(val) {
      if (val === "shapes") {
        this.getListData({
          page: 1,
          limit: 1000,
        });
      } else {
        this.getListData({
          page: 1,
          limit: 10,
        });
      }
    },
  },

  created() {
    getShoeRackListUser({}, 1, 1000).then(({ data }) => {
      this.shoeRackList = data;
      this.currentShoeRack = this.shoeRackList[0];
    });
  },
  methods: {
    getRackStatus(row, col) {
      const item = this.list.find(
        (child) =>
          child.rowNumberSort === row - 1 && child.colNumberSort === col - 1
      );
      if (!item) {
        return {
          status: "empty",
          item: null,
        };
      }

      return item.washCode
        ? {
            status: "occupy",
            item,
          }
        : {
            status: "empty",
            item,
          };
    },
    getListData({ page, limit }) {
      if (this.currentShoeRack === null) {
        return;
      }
      this.loading = true;
      getShoeRackGridList(
        {
          ...this.queryParams,
          shoeRackId: this.currentShoeRack.id,
        },
        page || this.queryParams.page + 1,
        this.viewModel === "list" ? limit : 1000
      )
        .then(({ data }) => {
          this.list = data.records;
          this.queryParams.total = data.total;
          this.queryParams.page = data.current;
          this.queryParams.limit = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  .menu {
    flex: 0 0 200px;
    padding: 0;
    margin: 0 10px 0 0;
    width: 0;
    li {
      list-style: none;
      padding: 5px 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      &:hover {
        background-color: #f5f7fa;
      }
      &.active {
        background-color: rgb(64, 158, 255);
        color: #ffffff;
      }
    }
  }
  .content {
    flex: 1;

    .shapes-section {
      .shapes-content {
        border: 1px solid #ebeef5;
        border-radius: 6px;
        display: inline-block;
        .shapes-row {
          border-bottom: 1px solid #eaeaea;
          display: flex;
          &:last-child {
            border-bottom: none;
          }
          .shapes-col {
            width: 100px;
            height: 100px;
            border-right: 1px solid #eaeaea;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            &.empty {
              background-color: #13ce66;
            }
            &.occupy {
              background-color: #ff4949;
            }
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
  }
}
</style>
